<template>
  <div class="todo todoInput">
    <el-input
      class="w-50 m-2"
      size="large"
      v-model="addtitle"
      placeholder="Please input"
    />
    <button class="todoSumit" @click="add">提交</button>
    <button class="todoSumit" @click="search">搜索</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { nanoid } from "nanoid";

const addtitle = ref("");
const props = defineProps({
  appAdd: Function,
  appSearch: Function,
  default: () => [],
});
function add() {
  if (!addtitle.value.trim()) {
    return alert("输入不能为空");
  }
  const addtodo = {
    id: nanoid(),
    title: addtitle.value,
    done: false,
  };
  props.appAdd(addtodo);
  addtitle.value = "";
}
function search() {
  if (!addtitle.value.trim()) {
    return alert("搜索不能为空");
  }
  props.appSearch(addtitle.value);
  addtitle.value = "";
}
</script>
<style scoped>
.todoInput {
  justify-content: space-evenly;
  margin-bottom: 30px;
}
.todoSumit {
  width: 78px;
  height: 40px;
  padding: 12px 19px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: #409eff;
  outline: none;
  margin-right: 1px;
}
.todoSumit:hover {
  background-color: #9ccbfb;
}
</style>
